<template>
  <div class="home-product"  ref='target'>
    <template v-if="list.length">
        <HomePanel :title="item.name" v-for="item in list" :key="item.id">
        <template v-slot:right>
            <div class="sub">
            <RouterLink  v-for="sub in item.children" :key="sub.id" :to="`/category/sub/${sub.id}`">{{sub.name}}</RouterLink>
            </div>
             <XtxMore :path="`/category/${item.id}`" />
        </template>
        <div class="box">
            <RouterLink class="cover"  :to="`/category/${item.id}`">
            <img v-lazy="item.picture" alt="">
            <strong class="label">
                <span>{{item.name}}馆</span>
                <span>{{item.saleInfo}}</span>
            </strong>
            </RouterLink>
            <ul class="goods-list">
            <li v-for="i in item.goods" :key="i.id">
                <HomeGoods :goods="i"/>
            </li>
            </ul>
        </div>
        </HomePanel>
   </template>
    
  </div>
</template>

<script>
import HomePanel from './HomePanel.vue'
import HomeGoods from './HomeGoods.vue'
import {findGoods} from '@/api/home'
import { useLazyData } from '@/hooks'
import {ref} from 'vue'
export default {
  name: 'HomeProduct',
  components: { HomePanel,HomeGoods },
  setup(){
    //   const list=ref(null)
    //   findGoods().then(data=>{
    //     list.value=data.result
    // })
    const target = ref(null)
    const result  = useLazyData(target,findGoods)
    
    return {list:result,target}
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/variables.less';
.home-product{
     height: 2900px;
     background-color: #fff;
     .sub{
         a{
            padding: 2px 10px;
            border-radius: 4px;
            &:hover {
            background: @xtxColor;
            color: #fff;
            }
      &:last-child {
        margin-right: 80px;
      }
         }
     }
    .box{
        display: flex;
       .cover{
           width: 240px;
           height: 610px;
           margin-right: 10px;
           position: relative;
           img{
               width: 100%;
               height: 100%;
           }
           .label{
               width: 188px;
               height: 66px;
               display: flex;
               position: absolute;
               left: 0;
               top: 50%;
               color: #fff;
               line-height: 66px;
               transform: translate3d(0,-50%,0);
               font-weight: normal;
               span{     
                   text-align: center;
                    &:first-child{
                        width: 76px;
                        background: rgba(0,0,0,0.9);
                    }
                    &:last-child{
                        width: 112px;
                        background: rgba(0,0,0,0.7);
                    }
               }
           }
       } 
       .goods-list{
           width: 990px;
           flex-wrap: wrap;
           display: flex;
           li{
               width: 240px;
               height: 300px;
            //    background: pink;
               margin-right: 10px;
               margin-bottom: 10px;
                &:nth-last-child(-n+4) {
                margin-bottom: 0;
                }
                &:nth-child(4n) {
                margin-right: 0;
                }
           }
       }
    }
   
}
</style>